<template>
  <div>
    <ay-aside :page-info="pageInfo" />
    <div class="app-container">
      <div class="filter-container">
        <el-collapse v-model="filterNameKey" @change="handleChangeCollapse">
          <el-collapse-item title="筛选条件" name="1">
            <el-row>
              <el-input v-model="search.shop_name" placeholder="店铺名称" style="width: 200px;" class="filter-item" />
              <el-input v-model="search.contact_name" placeholder="联系人" style="width: 200px;" class="filter-item" />
              <el-input v-model="search.contact_phone" placeholder="联系电话" style="width: 200px;" class="filter-item" />
              <el-input v-model="search.mappNo" placeholder="商户号" style="width: 200px;" class="filter-item" />
              <el-input v-model="search.companyNo" placeholder="企业号" style="width: 200px;" class="filter-item" />
              <el-select v-model="search.auditStatus" placeholder="审核状态" clearable style="width: 200px" class="filter-item">
                <el-option :key="0" label="未审核" :value="0" />
                <el-option :key="1" label="审核通过" :value="1" />
                <el-option :key="2" label="审核不通过" :value="2" />
              </el-select>
              <el-date-picker
                v-model="submitTimeTemp"
                class="filter-item"
                type="datetimerange"
                range-separator="至"
                start-placeholder="提交开始日期"
                end-placeholder="提交结束日期"
              />
            </el-row>
          </el-collapse-item>
        </el-collapse>
        <el-row>
          <el-button v-waves class="filter-item refresh-btn" icon="el-icon-refresh" @click="handleRefresh" />
          <transition name="el-zoom-in-center">
            <el-button v-show="isShowFilterBtn" v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleSearch">
              搜索
            </el-button>
          </transition>
          <transition name="el-zoom-in-center">
            <el-button v-show="isShowFilterBtn" v-waves class="filter-item" type="danger" icon="el-icon-close" @click="handleReset">
              重置
            </el-button>
          </transition>
        </el-row>
      </div>
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="tableData"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="#" align="center" width="60">
          <template slot-scope="{$index}">
            <span>{{ $index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="店铺名称" align="center" min-width="100px">
          <template slot-scope="{row}">
            <span>{{ row.shop_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系人" align="center" min-width="80px">
          <template slot-scope="{row}">
            <span>{{ row.contact_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系电话" align="center" width="110px">
          <template slot-scope="{row}">
            <span>{{ row.contact_phone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商户号" align="center" width="110px">
          <template slot-scope="{row}">
            <span>{{ row.union_pay_mapp_no }}</span>
          </template>
        </el-table-column>
        <el-table-column label="企业号" align="center" width="100px">
          <template slot-scope="{row}">
            <span>{{ row.union_pay_company_no }}</span>
          </template>
        </el-table-column>
        <el-table-column label="让利比例" align="center" width="50px">
          <template slot-scope="{row}">
            <span>{{ row.share_rate + '%' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="提交时间" align="center" width="160px">
          <template slot-scope="{row}">
            <span>{{ row.create_time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" align="center" width="100px">
          <template slot-scope="{row}">
            <span>{{ row.audit_status|filterAuditStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column label="审核人" align="center" min-width="50px">
          <template slot-scope="{row}">
            <span>{{ row.audit_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="审核时间" align="center" width="160px">
          <template slot-scope="{row}">
            <span>{{ row.auditTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="审核备注" align="center" min-width="100px">
          <template slot-scope="{row}">
            <span>{{ row.audit_description }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button v-show="row.audit_status === 0" type="success" size="mini" plain @click="handlePass(row.id)">审核通过</el-button>
            <el-button v-show="row.audit_status === 0" style="margin-left:0;" type="danger" size="mini" plain @click="handleBack(row.id)">审核驳回</el-button>
            <el-button style="margin-left:0;" type="primary" size="mini" plain @click="handleDetail(row)">编辑</el-button>
            <el-button v-show="loginerId === '1'" style="margin-left:0;" type="danger" size="mini" plain @click="handleDelete(row.id)">删除数据</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="pageTotal > 0" :total="pageTotal" :page.sync="pageNum" :limit.sync="pageSize" @pagination="getList" />
      <el-dialog title="申请资料" :visible.sync="dialogFormVisible" class="add-edit-dialog" @close="closeDialog">
        <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="180px">
          <el-collapse v-model="activeDialogCollapse">
            <el-collapse-item title="基本资料" name="1">
              <el-form-item label="商户号类型：">
                <el-select v-model="temp.shop_type" placeholder="请选择商户号类型" disabled clearable style="width:  320px">
                  <el-option :key="1" label="APP商户号" :value="1" />
                  <el-option :key="2" label="二维码商户号" :value="2" />
                </el-select>
              </el-form-item>
              <el-form-item label="店铺名称：">
                <el-input v-model="temp.shop_name" placeholder="店铺名称" style="width: 320px" />
              </el-form-item>
              <el-form-item label="联系人：">
                <el-input v-model="temp.contact_name" placeholder="联系人" style="width: 320px" />
              </el-form-item>
              <el-form-item label="联系电话：" prop="contact_phone">
                <el-input v-model="temp.contact_phone" placeholder="联系电话" style="width: 320px" />
              </el-form-item>
              <el-form-item label="商户号：">
                <el-input v-model="temp.union_pay_mapp_no" disabled placeholder="商户号" style="width: 320px" />
              </el-form-item>
              <el-form-item label="企业号：">
                <el-input v-model="temp.union_pay_company_no" disabled placeholder="企业号" style="width: 320px" />
              </el-form-item>
              <el-form-item label="让利比利">
                <el-input v-model="temp.share_rate" placeholder="让利比利" style="width: 320px">
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
              <el-form-item label="店铺归属：">
                <el-cascader
                  v-model="temp.classOption"
                  placeholder="店铺归属"
                  :options="shopClassoptions"
                  style="width: 320px"
                  :props="{ expandTrigger: 'hover' }"
                />
              </el-form-item>
              <!-- <el-form-item label="店铺所在地：">
                <el-cascader
                  v-model="selectedShopAreaOptions"
                  :options="areaOptions"
                  style="width: 320px"
                  clearable
                  placeholder="店铺所在地"
                  @change="handleShopAreaChange"
                />
              </el-form-item> -->
              <el-form-item label="店铺地址：">
                <el-input v-model="temp.address" placeholder="店铺地址" style="width: 320px" />
              </el-form-item>
              <el-form-item label="店铺门牌号：">
                <el-input v-model="temp.shop_house_no" placeholder="店铺门牌号" style="width: 320px" />
              </el-form-item>
              <el-form-item label="营业时间点：" prop="buninessTime">
                <el-select v-model="startWeek" placeholder="请选择开始天" clearable style="width: 140px">
                  <el-option :key="1" label="周一" value="周一" />
                  <el-option :key="2" label="周二" value="周二" />
                  <el-option :key="3" label="周三" value="周三" />
                  <el-option :key="4" label="周四" value="周四" />
                  <el-option :key="5" label="周五" value="周五" />
                  <el-option :key="6" label="周六" value="周六" />
                  <el-option :key="7" label="周日" value="周日" />
                </el-select>
                -
                <el-select v-model="endWeek" placeholder="请选择结束天" clearable style="width: 140px">
                  <el-option :key="1" label="周一" value="周一" />
                  <el-option :key="2" label="周二" value="周二" />
                  <el-option :key="3" label="周三" value="周三" />
                  <el-option :key="4" label="周四" value="周四" />
                  <el-option :key="5" label="周五" value="周五" />
                  <el-option :key="6" label="周六" value="周六" />
                  <el-option :key="7" label="周日" value="周日" />
                </el-select>
                <el-time-picker
                  v-model="startDate"
                  style="width: 140px"
                  format="HH:mm"
                  value-format="HH:mm"
                  :picker-options="{
                    selectableRange: '00:00:00 - 23:59:59'
                  }"
                  placeholder="开始时间点"
                />
                -
                <el-time-picker
                  v-model="endDate"
                  style="width: 140px"
                  format="HH:mm"
                  value-format="HH:mm"
                  :picker-options="{
                    selectableRange: '00:00:00 - 23:59:59'
                  }"
                  placeholder="结束时间点"
                />
              </el-form-item>
              <el-form-item label="经营状态：">
                <el-radio v-model="temp.operate_status" :label="1">营业中</el-radio>
                <el-radio v-model="temp.operate_status" :label="2">筹备中</el-radio>
              </el-form-item>
              <el-form-item label="店铺描述：">
                <el-input v-model="temp.shop_presentation" type="textarea" />
              </el-form-item>

              <el-form-item label="免单编码：">
                <el-input v-model="temp.region_code"    placeholder="免单编码" style="width: 320px" />
              </el-form-item>
            </el-collapse-item>
            <el-collapse-item title="门店照片" name="2">
              <el-form-item label="门头：" class="store-form-item">
                <div class="store-box">
                  <el-upload
                    class="store-uploader"
                    :action="uploadPath"
                    :show-file-list="false"
                    :on-success="handlePictureSuccess"
                    :before-upload="beforePictureUpload"
                  >
                    <img v-if="dialogFormVisible && temp.shop_door_photo" :src="temp.shop_door_photo" class="store">
                    <i v-else class="el-icon-plus store-uploader-icon" />
                  </el-upload>
                  <div class="store-name">
                    门头照片
                    <span
                      class="zoom"
                      @click="handlePictureCardPreview(temp.shop_door_photo)"
                    >
                      <i class="el-icon-zoom-in" />
                    </span>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="外观（最多3张）：" class="store-form-item">
                <div class="store-box">
                  <el-upload
                    :action="uploadPath"
                    :limit="3"
                    list-type="picture-card"
                    :file-list="temp.fileListAppearance"
                    :on-success="handleAppearancePictureSuccess"
                    :before-upload="beforePictureUpload"
                    :on-preview="handlePictureCardListPreview"
                    :on-remove="handleAppearancePictureRemove"
                  >
                    <i class="el-icon-plus " />
                  </el-upload>
                </div>
              </el-form-item>
              <el-form-item label="环境（最多9张）：" class="store-form-item">
                <div class="store-box">
                  <el-upload
                    :action="uploadPath"
                    :limit="9"
                    list-type="picture-card"
                    :file-list="temp.fileListEnvironment"
                    :on-success="handleEnvironmentPictureSuccess"
                    :before-upload="beforePictureUpload"
                    :on-preview="handlePictureCardListPreview"
                    :on-remove="handleEnvironmentPictureRemove"
                  >
                    <i class="el-icon-plus" />
                  </el-upload>
                </div>
              </el-form-item>
              <el-form-item label="其他（选填，最多9张）：" class="store-form-item">
                <div class="store-box">
                  <el-upload
                    :action="uploadPath"
                    :limit="9"
                    list-type="picture-card"
                    :file-list="temp.fileListOther"
                    :on-success="handleOtherPictureSuccess"
                    :before-upload="beforePictureUpload"
                    :on-preview="handlePictureCardListPreview"
                    :on-remove="handleOtherPictureRemove"
                  >
                    <i class="el-icon-plus" />
                  </el-upload>
                </div>
              </el-form-item>
            </el-collapse-item>
          </el-collapse>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">
            取消
          </el-button>
          <el-button type="primary" @click="updateData">
            修改
          </el-button>
        </div>
      </el-dialog>
      <el-dialog :visible.sync="dialogPcitureVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
      <el-dialog
        title="提示"
        :visible.sync="dialogDelVisible"
        width="30%"
      >
        <span>确定删除数据？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogDelVisible = false">取 消</el-button>
          <el-button type="primary" @click="deleteData">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { merchantEnterList, merchantEnterAudit, uploadPath, merchantEnterUpdate, manageLocalLifeClassList, merchantEnterDelete } from '@/api/merchant'
import { regionData } from 'element-china-area-data'
import waves from '@/directive/waves' // waves directive
import AyAside from '@/components/Aside'
import Pagination from '@/components/Pagination'
import { getAccountName, getAccountID } from '../../utils/auth'
import { deepClone } from '@/utils/index'
export default {
  name: 'MerchantStore',
  components: { AyAside, Pagination },
  directives: { waves },
  filters: {
    filterAuditStatus(val) {
      let resName = '未知审核状态'
      switch (val) {
        case 0:
          resName = '未审核'
          break
        case 1:
          resName = '审核通过'
          break
        case 2:
          resName = '审核不通过'
          break
      }
      return resName
    }
  },
  data() {
    // 时间验证
    const checkBuninessTime = (rule, value, callback) => {
      if (this.temp.startWeek === '' || this.temp.endWeek === '' || this.temp.startDate === null || this.temp.endDate === null) {
        return callback(new Error('营业时间点不能为空'))
      } else {
        callback()
      }
    }
    // 手机号验证
    const checkPhone = (rule, value, callback) => {
      // const phoneReg = /^1[3|4|5|6|7|8][0-9]{9}$/
      if (!value) {
        return callback(new Error('电话号码不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(+value)) {
          callback(new Error('请输入数字值'))
        } else {
          // if (phoneReg.test(value)) {
          callback()
          // } else {
          //   callback(new Error('电话号码格式不正确'))
          // }
        }
      }, 100)
    }
    return {
      loginerId: null,
      startWeek: '', // 店铺开始周数
      endWeek: '', // 店铺结束周数
      startDate: '', // 店铺开始时间点
      endDate: '', // 店铺结束时间点
      uploadPath: '',
      searchDateVal: '',
      isShowFilterBtn: true,
      filterNameKey: '1',
      pageInfo: {},
      listLoading: true,
      temp: {},
      search: {
        shop_name: '', // 会员id
        contact_name: '', // 审核状态(0 未审核/1审核通过/2审核不通过)
        contact_phone: '', // 申请类型（1线上/2线下）
        mappNo: '', // 店铺类型 (0 企业/1个人/2小微)
        companyNo: '',
        auditStatus: null,
        submitTime: '' // 提交时间
      },
      submitTimeTemp: '', // 提交时间中间量
      tableData: [],
      dialogFormVisible: false,
      activeDialogCollapse: '1',
      dialogImageUrl: '', // 放大图片路径
      dialogPcitureVisible: false, // 是否开启弹窗
      dialogDelVisible: false, // 删除弹窗
      delId: null,
      areaOptions: regionData,
      shopClassoptions: [], // 店铺归属数据
      classListTemp: [], // 店铺归属数据中间量
      selectedShopAreaOptions: [], // 店铺所在地数据
      rules: {
        buninessTime: [{ required: true, validator: checkBuninessTime, trigger: ['blur', 'change'] }],
        contact_phone: [{ required: true, validator: checkPhone, trigger: ['blur', 'change'] }]
      },
      pageNum: 1,
      pageSize: 10,
      pageTotal: 0
    }
  },
  watch: {
    submitTimeTemp(newval, oldval) {
      if (!newval) {
        this.search.submitTime = ''
      } else {
        const start = new Date(this.submitTimeTemp[0])
        const resStartDate = start.getFullYear() + '-' + this.doTwoDate((start.getMonth() + 1)) + '-' + this.doTwoDate(start.getDate())
        const resStartTime = this.doTwoDate(start.getHours()) + ':' + this.doTwoDate(start.getMinutes()) + ':' + this.doTwoDate(start.getSeconds())
        const end = new Date(this.submitTimeTemp[1])
        const resEndDate = end.getFullYear() + '-' + this.doTwoDate((end.getMonth() + 1)) + '-' + this.doTwoDate(end.getDate())
        const resEndTime = this.doTwoDate(end.getHours()) + ':' + this.doTwoDate(end.getMinutes()) + ':' + this.doTwoDate(end.getSeconds())
        this.search.submitTime = `${resStartDate} ${resStartTime}-${resEndDate} ${resEndTime}`
      }
    }
  },
  created() {
    this.getList()
    this.pageInfo = this.$route.meta
    this.loginerId = getAccountID()
  },
  mounted() {
    this.uploadPath = uploadPath
    this.selectLocalLifeClassList()
  },
  methods: {
    // 筛选条件面板状态改变
    handleChangeCollapse(activeNames) {
      if (activeNames.length === 0) {
        this.isShowFilterBtn = false
      } else {
        this.isShowFilterBtn = true
      }
    },
    // 关闭弹窗时
    closeDialog() {
      this.$nextTick(() => {
        this.activeDialogCollapse = '1'
      })
    },
    // 获取表格数据接口
    getList() {
      this.listLoading = true
      return new Promise((resolve, reject) => {
        const param = {}
        Object.assign(param, {
          page: this.pageNum,
          limit: this.pageSize
        }, this.search)
        merchantEnterList(param).then(response => {
          this.tableData = response.data.list
          this.pageTotal = response.data.total
          this.listLoading = false
          resolve(true)
        }).catch(error => {
          this.$message({
            message: error,
            type: 'error'
          })
          reject(false)
        })
      }
      )
    },
    doTwoDate(s) {
      return s < 10 ? '0' + s : s
    },
    // 刷新
    async handleRefresh() {
      if (await this.getList()) {
        this.$message({
          message: '刷新成功',
          type: 'success'
        })
      }
    },
    // 筛选查询操作
    handleSearch() {
      this.pageNum = 1
      this.getList()
    },
    // 初始化表单
    resetTemp() {
      this.temp = {
        roleId: undefined,
        roleName: '',
        menuIdList: [],
        remark: ''
      }
    },
    // 重置操作
    handleReset() {
      this.search = {
        shop_name: '', // 会员id
        contact_name: '', // 审核状态(0 未审核/1审核通过/2审核不通过)
        contact_phone: '', // 申请类型（1线上/2线下）
        mappNo: '', // 店铺类型 (0 企业/1个人/2小微)
        companyNo: '',
        auditStatus: null,
        submitTime: '' // 提交时间
      }
      this.submitTimeTemp = ''
    },
    // 审核通过
    handlePass(id) {
      this.$confirm('审核通过后不可撤销，确定要审核通过?', '提示', {
        confirmButtonText: '通过',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const param = {
          operationType: 1,
          id: id,
          auditName: getAccountName()
        }
        merchantEnterAudit(param).then(response => {
          this.getList()
          this.$message({
            message: response.msg,
            type: 'success'
          })
        })
      }).catch(() => {
      })
    },
    // 审核驳回
    handleBack(id) {
      this.$prompt('', '驳回原因', {
        confirmButtonText: '驳回',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        const param = {
          operationType: 2,
          id: id,
          description: value,
          auditName: getAccountName()
        }
        merchantEnterAudit(param).then(response => {
          this.getList()
          this.$message({
            message: response.msg,
            type: 'success'
          })
        })
      }).catch(() => {
      })
    },
    // 查看详情
    handleDetail(row) {
      this.dialogFormVisible = true
      this.temp = Object.assign({}, row)
      this.selectedShopAreaOptions = []
      this.selectedShopAreaOptions.push(this.temp.province_code, this.temp.city_code, this.temp.region_code)
      // 外观照片
      let resAppearance = []
      this.temp.fileListAppearance = []
      resAppearance = this.temp.shop_appearance_photo
      for (const i in resAppearance) {
        if (resAppearance[i] !== '') {
          this.temp.fileListAppearance.push({ url: resAppearance[i] })
        }
      }
      // 环境照片
      let resEnvironment = []
      this.temp.fileListEnvironment = []
      resEnvironment = this.temp.shop_environment_photo
      for (const i in resEnvironment) {
        if (resEnvironment[i] !== '') {
          this.temp.fileListEnvironment.push({ url: resEnvironment[i] })
        }
      }
      // 其他照片
      let resOther = []
      this.temp.fileListOther = []
      resOther = this.temp.shop_other_photo
      for (const i in resOther) {
        if (resOther[i] !== '') {
          this.temp.fileListOther.push({ url: resOther[i] })
        }
      }
      // 时间区间
      // this.temp.startWeek = ""
      this.startWeek = this.temp.business_time.substring(0, 5).split('至')[0]
      this.endWeek = this.temp.business_time.substring(0, 5).split('至')[1]
      this.startDate = this.temp.business_time.substring(6, 17).split('-')[0]
      this.endDate = this.temp.business_time.substring(6, 17).split('-')[1]
      // 店铺归属
      this.temp.classOption = []
      this.temp.classOption[0] = this.temp.class_name
      this.temp.classOption[1] = this.temp.sub_class_name
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 删除操作
    handleDelete(id) {
      this.dialogDelVisible = true
      this.delId = id
    },
    deleteData() {
      merchantEnterDelete({
        id: this.delId,
        operator: this.loginerId
      }).then(() => {
        this.dialogDelVisible = false
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
        this.getList()
      })
    },
    // 图片上传前
    beforePictureUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 图片预览
    handlePictureCardPreview(url) {
      this.dialogImageUrl = url
      this.dialogPcitureVisible = true
    },
    // 图片列表预览
    handlePictureCardListPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogPcitureVisible = true
    },
    // 门头图片上传成功
    handlePictureSuccess(res, file) {
      this.temp.shop_door_photo = res.data[0]
      // this.imageUrl = URL.createObjectURL(file.raw)
    },
    // 外观图片上传成功
    handleAppearancePictureSuccess(res, file) {
      this.temp.fileListAppearance.push({ url: res.data[0] })
    },
    // 外观图片删除
    handleAppearancePictureRemove(file, fileList) {
      if (fileList.length === 0) {
        this.temp.fileListAppearance = []
      } else {
        this.temp.fileListAppearance = []
        for (let i = 0; i < fileList.length; i++) {
          if (!fileList[i].response) {
            this.temp.fileListAppearance.push(fileList[i].url)
          } else {
            this.temp.fileListAppearance.push(fileList[i].response.data[0])
          }
        }
      }
    },
    // 环境图片上传成功
    handleEnvironmentPictureSuccess(res, file) {
      this.temp.fileListEnvironment.push({ url: res.data[0] })
    },
    // 环境图片删除
    handleEnvironmentPictureRemove(file, fileList) {
      if (fileList.length === 0) {
        this.temp.fileListEnvironment = []
      } else {
        this.temp.fileListEnvironment = []
        for (let i = 0; i < fileList.length; i++) {
          if (!fileList[i].response) {
            this.temp.fileListEnvironment.push(fileList[i].url)
          } else {
            this.temp.fileListEnvironment.push(fileList[i].response.data[0])
          }
        }
      }
    },
    // 其他图片上传成功
    handleOtherPictureSuccess(res, file) {
      this.temp.fileListOther.push({ url: res.data[0] })
    },
    // 其他图片删除
    handleOtherPictureRemove(file, fileList) {
      if (fileList.length === 0) {
        this.temp.fileListOther = []
      } else {
        this.temp.fileListOther = []
        for (let i = 0; i < fileList.length; i++) {
          if (!fileList[i].response) {
            this.temp.fileListOther.push(fileList[i].url)
          } else {
            this.temp.fileListOther.push(fileList[i].response.data[0])
          }
        }
      }
    },
    // 获取店铺归属列表
    selectLocalLifeClassList() {
      manageLocalLifeClassList().then(response => {
        this.classListTemp = deepClone(response.data)
        const clist = response.data
        const resultList = []
        for (let i = 0; i < clist.length; i++) {
          const p = {
            value: clist[i].class_1.class_name,
            // value: clist[i].class_2[0].type,
            label: clist[i].class_1.class_name,
            children: []
          }
          for (let j = 0; j < clist[i].class_2.length; j++) {
            p.children.push({
              value: clist[i].class_2[j].class_name,
              label: clist[i].class_2[j].class_name
            })
          }
          resultList.push(p)
        }
        this.shopClassoptions = resultList
      }).catch(error => {
        this.$message({
          message: error,
          type: 'error'
        })
      })
    },
    // 选择店铺区域
    handleShopAreaChange(val) {
      this.temp.province_code = val[0]
      this.temp.city_code = val[1]
      this.temp.region_code = val[2]
    },
    // 更新数据接口
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.temp.business_time = `${this.startWeek}至${this.endWeek} ${this.startDate}-${this.endDate}`
          this.temp.shop_appearance_photo = []
          for (const i in this.temp.fileListAppearance) {
            if (this.temp.fileListAppearance[i].response) {
              this.temp.shop_appearance_photo.push(this.temp.fileListAppearance[i].response.data[0])
              continue
            }
            if (this.temp.fileListAppearance[i].url) {
              this.temp.shop_appearance_photo.push(this.temp.fileListAppearance[i].url)
              continue
            }
            if (this.temp.fileListAppearance[i]) {
              this.temp.shop_appearance_photo.push(this.temp.fileListAppearance[i])
              continue
            }
          }
          this.temp.shop_environment_photo = []
          for (const i in this.temp.fileListEnvironment) {
            if (this.temp.fileListEnvironment[i].response) {
              this.temp.shop_environment_photo.push(this.temp.fileListEnvironment[i].response.data[0])
              continue
            }
            if (this.temp.fileListEnvironment[i].url) {
              this.temp.shop_environment_photo.push(this.temp.fileListEnvironment[i].url)
              continue
            }
            if (this.temp.fileListEnvironment[i]) {
              this.temp.shop_environment_photo.push(this.temp.fileListEnvironment[i])
              continue
            }
          }
          this.temp.shop_other_photo = []
          for (const i in this.temp.fileListOther) {
            if (this.temp.fileListOther[i].response) {
              this.temp.shop_other_photo.push(this.temp.fileListOther[i].response.data[0])
              continue
            }
            if (this.temp.fileListOther[i].url) {
              this.temp.shop_other_photo.push(this.temp.fileListOther[i].url)
              continue
            }
            if (this.temp.fileListOther[i]) {
              this.temp.shop_other_photo.push(this.temp.fileListOther[i])
              continue
            }
          }
          for (let i = 0; i < this.classListTemp.length; i++) {
            if (this.classListTemp[i].class_1.class_name === this.temp.classOption[0]) {
              this.temp.class_name = this.classListTemp[i].class_1.class_name
              for (let j = 0; j < this.classListTemp[i].class_2.length; j++) {
                if (this.classListTemp[i].class_2[j].class_name === this.temp.classOption[1]) {
                  this.temp.class_id = this.classListTemp[i].class_2[j].type
                  this.temp.sub_class_id = this.classListTemp[i].class_2[j].id
                  this.temp.sub_class_name = this.classListTemp[i].class_2[j].class_name
                }
              }
            }
          }
          const param = {
            id: this.temp.id,
            operate_status: this.temp.operate_status, // 营业状态
            shop_type: this.temp.shop_type, // 店铺类型
            shop_name: this.temp.shop_name, // 店铺名称
            contact_name: this.temp.contact_name, // 联系人
            contact_phone: this.temp.contact_phone, // 联系电话
            shop_house_no: this.temp.shop_house_no, // 门牌号
            class_id: this.temp.class_id, // 大分类
            class_name: this.temp.class_name,
            sub_class_id: this.temp.sub_class_id, // 小分类
            sub_class_name: this.temp.sub_class_name,
            share_rate: this.temp.share_rate, // 让利比例
            address: this.temp.address, // 店铺营业地址
            business_time: this.temp.business_time, // 营业时间
            shop_presentation: this.temp.shop_presentation, // 店铺介绍
            shop_door_photo: this.temp.shop_door_photo, // 门头照片
            shop_appearance_photo: this.temp.shop_appearance_photo, // 外观照片
            shop_environment_photo: this.temp.shop_environment_photo, // 环境照片
            shop_other_photo: this.temp.shop_other_photo, // 其他照片
            region_code: this.temp.region_code
          }
          merchantEnterUpdate(param).then((response) => {
            this.$message({
              message: '更新成功',
              type: 'success'
            })
          }).finally(() => {
            this.dialogFormVisible = false
            this.getList()
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.app-container {
  .el-table {
    .gray-row {
      color: #c2d2d2;
    }
  }
  .add-edit-dialog {
    .el-dialog{
      .el-dialog__body{
        height: 480px;
        overflow: auto;
      }
    }
    .store-form-item .el-form-item__content {
      display: flex;
      .store-box {
        margin-right: 20px;
        .store-uploader .el-upload {
          border: 1px dashed #d9d9d9;
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
        }
        .store-uploader .el-upload:hover {
          border-color: #409EFF;
        }
        .store-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          width: 148px;
          height: 148px;
          line-height: 148px;
          text-align: center;
        }
        .store {
          width: 148px;
          height: 148px;
          display: block;
        }
        .store-name {
          text-align: center;
          color: #8c939d;
          .zoom {
            cursor: pointer;
            padding: 6px;
          }
        }
      }
    }
  }
  .el-button--mini{
    padding: 7px;
  }
  .filter-container{
    .el-collapse {
      margin-bottom: 10px;
      .el-collapse-item {
        .el-collapse-item__header {
          font-weight: 600;
        }
      }
    }
    .filter-item {
      margin-left: 0;
      &.refresh-btn{
        background-color: #030303;
        color: azure;
      }
    }
  }
}
</style>
